<template>
  <div>
    <div class="add-pic">
      <input
        type="file"
        name
        ref="avatarInput"
        id="upload_avatar"
        accept="image/*"
        @change="uploadAvatar"
      >
      <img class="show_avatar" v-show="avatar_src" :src="avatar_src">
      <svg
        v-show="!avatar_src"
        class="plus"
        xmlns="http://www.w3.org/2000/svg"
        width="91"
        height="91"
        viewBox="0 0 52 52"
      >
        <path
          d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm0 50C12.767 50 2 39.233 2 26S12.767 2 26 2s24 10.767 24 24-10.767 24-24 24z"
        ></path>
        <path
          d="M38.5 25H27V14c0-.553-.448-1-1-1s-1 .447-1 1v11H13.5c-.552 0-1 .447-1 1s.448 1 1 1H25v12c0 .553.448 1 1 1s1-.447 1-1V27h11.5c.552 0 1-.447 1-1s-.448-1-1-1z"
        ></path>
      </svg>
    </div>
    <div class="btn-group">
      <button class=" btn change-btn" @click="change">確定</button>
      <button class="btn reset-btn" @click="$router.go(-1)">取消</button>
    </div>
  </div>
</template>

<script>
import { getInfo, isBind } from '@/api/login'
import axios from 'axios'
export default {
  name: 'ChangePic',
  data () {
    return {
      avatar_src: '',
      img: ''
      // img: new FormData()
    }
  },
  created () {
    this.loadList()
  },
  methods: {
    loadList () {
      getInfo().then(res => {
        if (res.code === 1) {
          this.wxBind(res.data.uid)
          localStorage.setItem('uid', res.data.uid)
          this.avatar_src = res.data.photo
          if (!this.avatar_src) {
            this.avatar_src = '/public/upload/image/1548151211-c81e728d9d4c2f636f067f89cc14862c.png'
          }
        } else {
          alert('请先登录')
          this.$router.push('/login')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    wxBind (uid) {
      isBind({uid: uid}).then(res => {
        if (res.code !== 1) {
          this.$router.push('/wx_bind')
        }
      }).catch(err => { console.log(err) })
    },
    uploadAvatar () {
      const image = new FormData()
      image.append('image', this.$refs.avatarInput.files[0])
      image.append('type', 'user')
      var URL = window.URL || window.webkitURL
      var imgUrl = URL.createObjectURL(this.$refs.avatarInput.files[0])
      this.avatar_src = imgUrl
      this.img = image
    },
    change () {
      console.log(12312)
      axios.post('/think.php/image/upload', this.img, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.code === 1) {
          alert('上传成功')
          this.avatar_src = res.data.data.path
          this.$router.go(-1)
        }
      }).catch(err => {
        console.log(err)
      })
    }

  }
}
</script>

<style scoped>
.add-pic {
  margin: 0 auto;
  margin-top: 20%;
  /* border-radius: 10px; */
  height: 300px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,10%);
  position: relative;
}
.plus {
  opacity: 0.5;
}
#upload_avatar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
.show_avatar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.btn-group {
  width: 100%;
  margin-top: 10%;
  padding: 20px;
}
.btn {
  width: 129px;
  height: 46px;
  opacity:0.8;
  border-radius:10px;
  border: none;
  color: #fff;
  font-size: 14px;
  text-align: center;
}
.change-btn {
  margin-left: 20px;
  background: rgb(249, 119, 130);
  background:linear-gradient(93deg,rgba(240,84,73,1) 0%,rgba(240,89,67,1) 18%,rgba(237,56,99,1) 55%,rgba(238,57,98,1) 64%,rgba(237,56,99,1) 100%);
}
.reset-btn {
  background: #ccc;
  float: right;
  margin-right: 20px;
}
</style>
